<template>
    <f7-page class="hntsh common-page has-bottom-btns">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>巡检记录</f7-nav-title>
            <f7-nav-right> </f7-nav-right>
        </f7-navbar>
        <div class="hear-bg">
        </div>
        <div class="content-box">
            <div class="content-box-top">
                <img width="60"
                    :src="require(`../../../../../../assets/img/qzjx/mobile/${models.model.equipmentType ? models.model.equipmentType.toUpperCase() : 'QT'}.png`)"
                    alt="" class="left-box">
                <div class="right-box">
                    <div class="title-box">
                        <h3>
                            {{ models.model.recordCode }}
                        </h3>
                    </div>
                    <p><span class="key">设备类型：</span><span class="value">{{ models.model.equipmentType |
                        DictItem(controlData.mobileEquipmentType) }}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="records">
            <div class="title">巡检记录</div>
            <f7-list media-list class="search-list" v-if="query.data.length > 0">
                <li v-for="(item, index) in query.data" :key="index" @click="onDetail(item)">
                    <span>{{ showTime1(item.patrolTime) }}</span>
                    <span class="tag" :class="statusClass(item.status)">
                        <img src="../../../../../../assets/img/qzjx/mobile/icon_cqzg.png" alt=""
                            class="overtime-img" v-if="item.overdueResult == '超期整改'">
                        {{ statusText(item.status) }}<van-icon name="arrow" style="margin-left: 3px;"/></span>

                </li>
            </f7-list>
            <v-empty v-else description="暂无数据" />
        </div>
        <f7-toolbar position="bottom" no-shadow class="fff" v-if="canEdit">
            <f7-button fill class="submit-btn" @click="onPatrolCreate">登记巡检记录</f7-button>
        </f7-toolbar>
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/workflowController";
export default class instance extends controller {
    onInit() {
        this.context.registerId = this.$f7route.query.registerId;
        this.context.status = this.$f7route.query.status;
    }
    onBeforeInit() {
        this.urls = {
            model: "/app/equipment/eqmMobileRegister/getEntity",
            query: "/app/equipment/eqmMobilePatrol/queryPatrolList"
        };
    }
    onBeforeQuery(type, conditions, params) {
        if (type == 'list') {
            params.length = 9999;
            params.query.registerId = this.$f7route.query.registerId;
        }
    }
    mixin() {
        return {
            data() {
                return {
                    status:null,
                    models: {
                        model: {}
                    }
                };
            },
            computed:{
                canEdit(){// 监理单位 且未完成
                    return Number(window.localStorage.getItem('mobileEquip-isSupOrg')) && this.status != 2
                }
            },
            methods: {
                // 拨打电话
                call(mobile) {
                    if (mobile && window.plus) {
                        window.plus.device.dial(mobile);
                    }
                },
                showTime1(date) {
                    if (date) {
                        return formatter.formatDate(date, "yyyy-MM-dd");
                    } else {
                        return "--";
                    }
                },
                statusText(val) {
                    if (val == 'draft') {
                        return "草稿";
                    } else if (val == 'waiting') {
                        return "待处理";
                    } else if (val == 'finished') {
                        return "待审核";
                    } else if (val == 'closed') {
                        return "已完成";
                    }
                },
                statusClass(val) {
                    if (val == 'draft') {
                        return "tag-yellow";
                    } else if (val == 'waiting') {
                        return "tag-yellow";
                    } else if (val == 'finished') {
                        return "tag-blue";
                    } else if (val == 'closed') {
                        return "tag-gray";
                    }
                },
                // 详情
                onDetail(item) {
                    this.$f7.preloader.show();
                    let url = "/business/qzjx/mobileEquipment/equip/patrol/create";
                    this.$framework.util
                        .getPromise(`/workflow/getWorkflowArgs`, { formId: item.patrolId })
                        .then(res => {
                            if (!res.pageAction || !res.assigneeId) {
                                this.$f7.preloader.hide();
                                return;
                            }
                            const params = {
                                pageAction: res.pageAction,
                                caseId: item.patrolId,
                                assigneeId: res.assigneeId,
                                registerId: this.models.model.registerId,
                                action: res.pageAction == 'edit' ? 'processEdit' : 'processView',
                                formId: item.patrolId,// 用于获取流程数据
                                engineeId: this.models.model.engineeId
                            };

                            if (res.pageAction === 'view') {
                                Object.assign(params, { historyTaskId: res.historyTaskId })
                            } else {
                                Object.assign(params, { taskId: res.taskId })
                            }
                            let paramStr = [];
                            for (let key in params) {
                                paramStr.push(`${key}=${params[key]}`);
                            }
                            paramStr = paramStr.join("&");
                            this.$f7.view.current.router.navigate(url + `?${paramStr}`);
                        })
                        .catch(err => {
                            this.$f7.preloader.hide();
                        })
                        .finally(() => { });
                },
                // 登记巡检记录
                onPatrolCreate() {
                    this.$f7.view.current.router.navigate(`/business/qzjx/mobileEquipment/equip/patrol/create?registerId=${this.models.model.registerId}&engineeId=${this.models.model.engineeId}&action=processStart&appCode=mobileMachineryInspection&version=1&isDelay=false`);
                }
            },
        };
    }
}
</script>

<style lang="less" scoped>
@import url("../../../../../../assets/css/commonPage.less");

.hear-bg {
    width: 100%;
    position: absolute;
    top: 44px;
    background: linear-gradient(180deg, #1990ff 0%, rgba(25, 144, 255, 0) 100%);
    height: 92px;
}

.content-box {
    padding: 15px;
    margin: 10px 16px 10px;
    font-size: 13px;
    background: linear-gradient(196deg, #eff6ff 0%, #ffffff 100%);
    box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
    border-radius: 8px;

    .content-box-top {
        display: flex;
        align-items: flex-start;

        .right-box {
            word-break: break-all;
            flex: 1;
            margin-left: 10px;

            .title-box {
                display: flex;
                justify-content: space-between;
                align-items: center;

                h3 {
                    color: #242424;
                    font-size: 16px;
                    flex: 1;
                    margin: 5px 0 10px;
                }
            }

            p {
                font-size: 13px;
                margin: 0;

                .key {
                    display: inline-block;
                    color: #8995AC;
                }

                .value {
                    color: #61677A;
                }
            }

        }
    }
}

.common-page .search-list {
    padding: 0;
}

.search-list {
    margin: 0;

    li {
        padding: 12px 0;
        font-size: 14px;
        color: #333;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #e9edf7;

        &:last-child {
            border-bottom: none;
        }

        .tag {
            position: relative;
            font-size: 13px;
            background: #fff;
            color: #61677a;
            border: none;
        }

        .tag-yellow {
            color: #ff9f24;
        }

        .tag-blue {
            color: #3385ff;
        }

        .tag-gray {
            color: #61677a;
        }

        .overtime-img {
            position: absolute;
            right: 70px;
            top: 50%;
            transform: translateY(-50%);
            width: 37px;
            height: 37px;
        }
    }
}

.records {
    padding: 15px 15px 10px;
    margin: 10px 16px;
    font-size: 13px;
    box-shadow: 0px 3px 8px 0px rgba(165, 201, 255, 0.1);
    border-radius: 8px;
    background: #fff;

    .title {
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        position: relative;
        padding-left: 10px;
        height: 25px;
        line-height: 25px;

        &::before {
            content: "";
            position: absolute;
            left: 0;
            width: 3.5px;
            height: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: #1990ff;
        }
    }
}
</style>
